<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Highcharts Example</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="data-from-csv_files/jquery.js"></script>
		<script type="text/javascript" src="data-from-csv_files/highcharts.js"></script>
		<!--[if IE]>
			<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
		<![endif]-->
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		$(document).ready(function() {
			

			var options = {
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'column'
				},
				title: {
					text: 'Fruit Consumption'
				},
				xAxis: {
					categories: []
				},
				yAxis: {
					title: {
						text: 'Units'
					}
				},
				series: []
			};
			
			/*
			 Load the data from the CSV file. This is the contents of the file:
			 
				Apples,Pears,Oranges,Bananas,Plums
				John,8,4,6,5
				Jane,3,4,2,3
				Joe,86,76,79,77
				Janet,3,16,13,15
				
			 */ 
			$.get('data.csv', function(data) {
				// Split the lines
				var lines = data.split('\n');
				$.each(lines, function(lineNo, line) {
					var items = line.split(',');
					
					// header line containes categories
					if (lineNo == 0) {
						$.each(items, function(itemNo, item) {
							if (itemNo > 0) options.xAxis.categories.push(item);
						});
					}
					
					// the rest of the lines contain data with their name in the first position
					else {
						var series = { 
							data: []
						};
						$.each(items, function(itemNo, item) {
							if (itemNo == 0) {
								series.name = item;
							} else {
								series.data.push(parseFloat(item));
							}
						});
						
						options.series.push(series);

					}
					
				});
				
				var chart = new Highcharts.Chart(options);
			});
			
			
		});
		</script>
		
	<link href="data-from-csv_files/light.css" type="text/css" rel="stylesheet"><link href="data-from-csv_files/Content.css" type="text/css" rel="stylesheet"></head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"><div style="position: relative; overflow: hidden; width: 800px; height: 400px; text-align: left; line-height: normal; font-family: &quot;Lucida Grande&quot;,&quot;Lucida Sans Unicode&quot;,Verdana,Arial,Helvetica,sans-serif; font-size: 12px; left: 0px; top: 0px; cursor: auto;" id="highcharts-0" class="highcharts-container"><svg height="400" width="800" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="highcharts-1"><rect stroke-width="0" height="297" width="724" y="0" x="0" fill="none" ry="0" rx="0"></rect></clipPath></defs><rect stroke="#4572A7" stroke-width="0" height="400" width="800" y="0" x="0" fill="#FFFFFF" ry="5" rx="5"></rect><text zIndex="1" class="highcharts-title" text-anchor="middle" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#3E576F;fill:#3E576F;" y="25" x="400"><tspan x="400">Fruit Consumption</tspan></text><g zIndex="1" class="highcharts-grid"></g><g zIndex="1" class="highcharts-grid"><path zIndex="1" stroke-width="1" stroke="#C0C0C0" fill="none" d="M 66 336.5 L 790 336.5"></path><path zIndex="1" stroke-width="1" stroke="#C0C0C0" fill="none" d="M 66 277.5 L 790 277.5"></path><path zIndex="1" stroke-width="1" stroke="#C0C0C0" fill="none" d="M 66 218.5 L 790 218.5"></path><path zIndex="1" stroke-width="1" stroke="#C0C0C0" fill="none" d="M 66 158.5 L 790 158.5"></path><path zIndex="1" stroke-width="1" stroke="#C0C0C0" fill="none" d="M 66 99.5 L 790 99.5"></path><path zIndex="1" stroke-width="1" stroke="#C0C0C0" fill="none" d="M 66 40.5 L 790 40.5"></path></g><g zIndex="3" class="highcharts-series-group"><g transform="translate(66,40)" visibility="visible" clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)" class="highcharts-series"><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="23" width="20" y="272.5" x="38.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="23" width="20" y="272.5" x="38.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="23" width="20" y="272.5" x="38.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="23" width="20" y="272.5" x="38.5" fill="#4572A7" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="11" width="20" y="284.5" x="219.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="11" width="20" y="284.5" x="219.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="11" width="20" y="284.5" x="219.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="11" width="20" y="284.5" x="219.5" fill="#4572A7" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="17" width="20" y="278.5" x="400.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="17" width="20" y="278.5" x="400.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="17" width="20" y="278.5" x="400.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="17" width="20" y="278.5" x="400.5" fill="#4572A7" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="14" width="20" y="281.5" x="581.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="14" width="20" y="281.5" x="581.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="14" width="20" y="281.5" x="581.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="14" width="20" y="281.5" x="581.5" fill="#4572A7" ry="0" rx="0"></rect></g><g transform="translate(66,40)" visibility="visible" clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)" class="highcharts-series"><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="8" width="20" y="287.5" x="66.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="8" width="20" y="287.5" x="66.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="8" width="20" y="287.5" x="66.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="8" width="20" y="287.5" x="66.5" fill="#AA4643" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="11" width="20" y="284.5" x="247.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="11" width="20" y="284.5" x="247.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="11" width="20" y="284.5" x="247.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="11" width="20" y="284.5" x="247.5" fill="#AA4643" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="5" width="20" y="290.5" x="428.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="5" width="20" y="290.5" x="428.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="5" width="20" y="290.5" x="428.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="5" width="20" y="290.5" x="428.5" fill="#AA4643" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="8" width="20" y="287.5" x="609.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="8" width="20" y="287.5" x="609.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="8" width="20" y="287.5" x="609.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="8" width="20" y="287.5" x="609.5" fill="#AA4643" ry="0" rx="0"></rect></g><g transform="translate(66,40)" visibility="visible" clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)" class="highcharts-series"><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="254" width="20" y="41.5" x="93.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="254" width="20" y="41.5" x="93.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="254" width="20" y="41.5" x="93.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="254" width="20" y="41.5" x="93.5" fill="#89A54E" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="225" width="20" y="70.5" x="274.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="225" width="20" y="70.5" x="274.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="225" width="20" y="70.5" x="274.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="225" width="20" y="70.5" x="274.5" fill="#89A54E" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="233" width="20" y="62.5" x="455.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="233" width="20" y="62.5" x="455.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="233" width="20" y="62.5" x="455.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="233" width="20" y="62.5" x="455.5" fill="#89A54E" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="227" width="20" y="68.5" x="636.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="227" width="20" y="68.5" x="636.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="227" width="20" y="68.5" x="636.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="227" width="20" y="68.5" x="636.5" fill="#89A54E" ry="0" rx="0"></rect></g><g transform="translate(66,40)" visibility="visible" clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)" class="highcharts-series"><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="8" width="20" y="287.5" x="120.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="8" width="20" y="287.5" x="120.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="8" width="20" y="287.5" x="120.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="8" width="20" y="287.5" x="120.5" fill="#80699B" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="47" width="20" y="248.5" x="301.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="47" width="20" y="248.5" x="301.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="47" width="20" y="248.5" x="301.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="47" width="20" y="248.5" x="301.5" fill="#80699B" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="38" width="20" y="257.5" x="482.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="38" width="20" y="257.5" x="482.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="38" width="20" y="257.5" x="482.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="38" width="20" y="257.5" x="482.5" fill="#80699B" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.05" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="5" height="44" width="20" y="251.5" x="663.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="3" height="44" width="20" y="251.5" x="663.5" fill="none" ry="0" rx="0"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" isShadow="true" stroke="rgb(0, 0, 0)" stroke-width="1" height="44" width="20" y="251.5" x="663.5" fill="none" ry="0" rx="0"></rect><rect stroke="#FFFFFF" stroke-width="1" height="44" width="20" y="251.5" x="663.5" fill="#80699B" ry="0" rx="0"></rect></g></g><g zIndex="7" class="highcharts-axis"><text visibility="visible" text-anchor="middle" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:163px;color:#666;line-height:14px;fill:#666;" y="350" x="156.5"><tspan x="156.5">Apples</tspan></text><text visibility="visible" text-anchor="middle" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:163px;color:#666;line-height:14px;fill:#666;" y="350" x="337.5"><tspan x="337.5">Pears</tspan></text><text visibility="visible" text-anchor="middle" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:163px;color:#666;line-height:14px;fill:#666;" y="350" x="518.5"><tspan x="518.5">Oranges</tspan></text><text visibility="visible" text-anchor="middle" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:163px;color:#666;line-height:14px;fill:#666;" y="350" x="699.5"><tspan x="699.5">Bananas</tspan></text><path stroke-width="1" stroke="#C0D0E0" fill="none" d="M 247.5 336 L 247.5 341"></path><path stroke-width="1" stroke="#C0D0E0" fill="none" d="M 428.5 336 L 428.5 341"></path><path stroke-width="1" stroke="#C0D0E0" fill="none" d="M 609.5 336 L 609.5 341"></path><path stroke-width="1" stroke="#C0D0E0" fill="none" d="M 790.5 336 L 790.5 341"></path></g><g zIndex="7" class="highcharts-axis"><text visibility="visible" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:346px;color:#666;line-height:14px;fill:#666;" y="341.6" x="58"><tspan x="58">0</tspan></text><text visibility="visible" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:346px;color:#666;line-height:14px;fill:#666;" y="282.40000000000003" x="58"><tspan x="58">20</tspan></text><text visibility="visible" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:346px;color:#666;line-height:14px;fill:#666;" y="223.20000000000002" x="58"><tspan x="58">40</tspan></text><text visibility="visible" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:346px;color:#666;line-height:14px;fill:#666;" y="164" x="58"><tspan x="58">60</tspan></text><text visibility="visible" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:346px;color:#666;line-height:14px;fill:#666;" y="104.79999999999998" x="58"><tspan x="58">80</tspan></text><text visibility="visible" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:346px;color:#666;line-height:14px;fill:#666;" y="45.6" x="58"><tspan x="58">100</tspan></text></g><text visibility="visible" text-anchor="middle" transform="rotate(270 25.140625 188)" zIndex="7" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#6D869F;font-weight:bold;fill:#6D869F;" y="188" x="25.140625"><tspan x="25.140625">Units</tspan></text><path visibility="visible" zIndex="7" stroke-width="1" stroke="#C0D0E0" fill="none" d="M 66 336.5 L 790 336.5"></path><g transform="translate(85,60)" visibility="hidden" style="padding:0;white-space:nowrap;" zIndex="8"><rect transform="translate(1,1)" stroke-opacity="0.05" stroke="rgb(0, 0, 0)" isShadow="true" anchorY="0" anchorX="0" fill-opacity="0.85" stroke-width="5" height="36" width="60" y="0" x="0" fill="none" ry="5" rx="5"></rect><rect transform="translate(1,1)" stroke-opacity="0.1" stroke="rgb(0, 0, 0)" isShadow="true" anchorY="0" anchorX="0" fill-opacity="0.85" stroke-width="3" height="36" width="60" y="0" x="0" fill="none" ry="5" rx="5"></rect><rect transform="translate(1,1)" stroke-opacity="0.15000000000000002" stroke="rgb(0, 0, 0)" isShadow="true" anchorY="0" anchorX="0" fill-opacity="0.85" stroke-width="1" height="36" width="60" y="0" x="0" fill="none" ry="5" rx="5"></rect><rect stroke="#89A54E" anchorY="0" anchorX="0" fill-opacity="0.85" stroke-width="2" height="36" width="60" y="0" x="0" fill="rgb(255,255,255)" ry="5" rx="5"></rect><text zIndex="1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" y="18" x="5"><tspan x="5" style="font-size: 10px">Apples</tspan><tspan x="5" dy="13" style="fill:#89A54E">Joe</tspan><tspan dx="3">: </tspan><tspan dx="3" style="font-weight:bold">86</tspan></text></g><text zIndex="8" text-anchor="end" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:10px;cursor:pointer;color:#909090;fill:#909090;" y="395" x="790"><tspan x="790">Highcharts.com</tspan></text><g transform="translate(66,40)" zIndex="9" class="highcharts-tracker"><g clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)"><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950589" stroke-width="0" height="23" width="21" y="272" x="38" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950589" stroke-width="0" height="11" width="21" y="284" x="219" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950589" stroke-width="0" height="17" width="21" y="278" x="400" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950589" stroke-width="0" height="14" width="21" y="281" x="581" fill="rgb(192,192,192)" ry="0" rx="0"></rect></g><g clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)"><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950604" stroke-width="0" height="8" width="21" y="287" x="66" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950604" stroke-width="0" height="11" width="21" y="284" x="247" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950604" stroke-width="0" height="5" width="21" y="290" x="428" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950604" stroke-width="0" height="8" width="21" y="287" x="609" fill="rgb(192,192,192)" ry="0" rx="0"></rect></g><g clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)"><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950617" stroke-width="0" height="254" width="21" y="41" x="93" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950617" stroke-width="0" height="225" width="21" y="70" x="274" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950617" stroke-width="0" height="233" width="21" y="62" x="455" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950617" stroke-width="0" height="227" width="21" y="68" x="636" fill="rgb(192,192,192)" ry="0" rx="0"></rect></g><g clip-path="url(http://www.highcharts.com/studies/data-from-csv.htm#highcharts-1)"><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950625" stroke-width="0" height="8" width="21" y="287" x="120" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950625" stroke-width="0" height="47" width="21" y="248" x="301" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950625" stroke-width="0" height="38" width="21" y="257" x="482" fill="rgb(192,192,192)" ry="0" rx="0"></rect><rect style="" zIndex="1" visibility="visible" fill-opacity="0.000001" isTracker="1352164950625" stroke-width="0" height="44" width="21" y="251" x="663" fill="rgb(192,192,192)" ry="0" rx="0"></rect></g></g><g transform="translate(288,360)" zIndex="10" class="highcharts-legend"><rect visibility="visible" stroke="#909090" stroke-width="1" height="24" width="222" y="0.5" x="0.5" fill="none" ry="5" rx="5"></rect><text zIndex="2" text-anchor="start" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" y="18" x="30"><tspan x="30">John</tspan></text><text zIndex="2" text-anchor="start" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" y="18" x="85.03125"><tspan x="85.03125">Jane</tspan></text><text zIndex="2" text-anchor="start" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" y="18" x="138.5625"><tspan x="138.5625">Joe</tspan></text><text zIndex="2" text-anchor="start" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" y="18" x="185.390625"><tspan x="185.390625">Janet</tspan></text><rect stroke="#4572A7" zIndex="3" stroke-width="0" height="12" width="16" y="7.5" x="9.5" fill="#4572A7" ry="2" rx="2"></rect><rect stroke="#AA4643" zIndex="3" stroke-width="0" height="12" width="16" y="7.5" x="64.53125" fill="#AA4643" ry="2" rx="2"></rect><rect stroke="#89A54E" zIndex="3" stroke-width="0" height="12" width="16" y="7.5" x="118.0625" fill="#89A54E" ry="2" rx="2"></rect><rect stroke="#80699B" zIndex="3" stroke-width="0" height="12" width="16" y="7.5" x="164.890625" fill="#80699B" ry="2" rx="2"></rect></g></svg></div></div>
		
				
	

</body></html>